import React, { useState } from 'react'
import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { Drawer, Form, Input, Button, Checkbox, Tabs, TabPane } from '@nutui/nutui-react-taro'
import eye2 from '@/assets/imgs/eye2.png'
import timeLine from '@/assets/imgs/timeLine.png'
import './ToDoTasks.scss'

const ToDoTasks = () => {
  const [drawerVisible, setDrawerVisible] = useState(false)
  const [checkedList, setCheckedList] = useState([])
  const [activeKey, setActiveKey] = useState(0)
  const [formState, setFormState] = useState({ name: '', time: '' })

  const plainOptions = ['放松一天', '备战专业知识', '整理当前岗位的专业要求']

  const goHome = () => {
    Taro.navigateTo({ url: '/pages/home/home' })
  }

  const addPlan = () => {
    setDrawerVisible(true)
  }

  const handleCheckedListChange = (value) => {
    setCheckedList(value)
  }

  return (
    <View className="toDoTasks">
      <View className="pageTitle">
        待办
        <View className="close" onClick={goHome}></View>
      </View>

      <View className="recentPlan">
        <View className="box">
          <View style={{ marginBottom: '10px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <Text style={{ fontSize: '25px' }}>近期计划</Text>
            <Text style={{ fontSize: '35px' }} onClick={addPlan}>+</Text>
          </View>
          <View style={{ display: 'flex', flexDirection: 'column' }}>
            <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text>计划1</Text>
              <Text>截止时间 <Text className="endTime">2025.5.1</Text></Text>
              <Text>剩余 <Text className="remainTime">1 周</Text></Text>
            </View>
            <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text>计划1</Text>
              <Text>截止时间 <Text className="endTime">2025.5.1</Text></Text>
              <Text>剩余 <Text className="remainTime">1 周</Text></Text>
            </View>
            <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text>计划1</Text>
              <Text>截止时间 <Text className="endTime">2025.5.1</Text></Text>
              <Text>剩余 <Text className="remainTime">1 周</Text></Text>
            </View>
          </View>
        </View>
      </View>

      <View className="coreTask">
        <View className="title">今日核心任务</View>
        <View style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
          <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fff8de', padding: '5px 10px' }}>
            <View style={{ display: 'flex', alignItems: 'center' }}>
              <View>口</View>
              <View style={{ display: 'flex', flexDirection: 'column', textAlign: 'left', marginLeft: '15px' }}>
                <Text>7:00 - 8:00</Text>
                <Text>晨跑</Text>
              </View>
            </View>
            <Image className="eye" src={eye2} alt="" />
          </View>
          <View className="add">+添加</View>
        </View>
      </View>

      <View className="toDoList">
        <View className="title">今日待办</View>
        <View style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
          <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fff8de', padding: '5px 10px' }}>
            <View style={{ display: 'flex', alignItems: 'center' }}>
              <View>口</View>
              <View style={{ display: 'flex', flexDirection: 'column', textAlign: 'left', marginLeft: '15px' }}>
                <Text>7:00 - 8:00</Text>
                <Text>晨跑</Text>
              </View>
            </View>
            <Image className="eye" src={eye2} alt="" />
          </View>
          <View style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fff8de', padding: '5px 10px' }}>
            <View style={{ display: 'flex', alignItems: 'center' }}>
              <View>口</View>
              <View style={{ display: 'flex', flexDirection: 'column', textAlign: 'left', marginLeft: '15px' }}>
                <Text>7:00 - 8:00</Text>
                <Text>晨跑</Text>
              </View>
            </View>
            <Image className="eye" src={eye2} alt="" />
          </View>
          <View className="add">+添加</View>
        </View>
      </View>

      <View className="timeTrack">
        <View className="title">时间轨迹</View>
        <Image className="timeImg" src={timeLine} alt="" />
      </View>

      <Drawer
        visible={drawerVisible}
        position="right"
        style={{ width: '100%', height: '100%' }}
        onClose={() => setDrawerVisible(false)}
      >
        <View className="drawer">
          <View className="confirm-btn">确定</View>
          <View className="formBox">
            <Form>
              <Input label="名称:" placeholder="" value={formState.name} onChange={value => setFormState({ ...formState, name: value })} />
              <Input label="持续时长:" placeholder="" value={formState.time} onChange={value => setFormState({ ...formState, time: value })} suffix="周" />
            </Form>
            <View className="addItem">√</View>
          </View>
          <View className="selectInput">
            {checkedList.map((item, index) => (
              <View key={index} className="tag">
                {item}
                <Text className="icon">1周</Text>
              </View>
            ))}
          </View>
          <View className="tmplateTitle">模板列表</View>
          <Tabs value={activeKey} onChange={setActiveKey} scroll>
            <TabPane title="重启计划">
              <Checkbox.Group value={checkedList} onChange={handleCheckedListChange}>
                {plainOptions.map(item => (
                  <Checkbox key={item} value={item}>{item}</Checkbox>
                ))}
              </Checkbox.Group>
            </TabPane>
            <TabPane title="其他">
              <View>111</View>
            </TabPane>
          </Tabs>
        </View>
      </Drawer>
    </View>
  )
}

export default ToDoTasks